{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en" class="">
<head>
	<meta charset="utf-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  	<title> 商城 账号 - 注册</title>
    <meta name="description" content="欢迎登录和注册 Flyme 账号，您可以体验手机云服务功能，包括：在线下载应用，同步手机数据和查找手机等，让您的手机管理更加智能。">
    <meta name="keywords" content="魅族 meizu 登录flyme 云服务 查找手机 充值账号 MX M9 MX2">
    <link href="{% static 'web/img/favicon.ico' %}" rel="shortcut icon" type="image/x-icon"/>
    <link href="{% static 'web/img/favicon.ico' %}" rel="icon" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="{% static 'web/css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="{% static 'web/js/jquery-1.12.4.min.js' %}"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{% static 'web/js/bootstrap.min.js' %}"></script>
  	<!-- 兼任ie9以下 -->
  	<!--[if lt IE 9]>
      		<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
      		<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
  	<![endif]-->
    <!-- 自定义 -->
    <link rel="stylesheet" type="text/css" href="{% static 'web/css/global.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'web/css/register.css' %}">
    <script type="text/javascript" src="{% static 'web/js/rem.js' %}"></script>
    <script type="text/javascript" src="{% static 'web/js/topNav.js' %}"></script>
    <style type="text/css">
      #tips {
            float: left;
            margin: 2px 0 0 20px;
      }

      #tips label {
          float: left;
          height: 20px;
          margin-left: 5px;
          margin-right: 10px;
          line-height: 20px;
      }

      #tips span {
          float: left;
          width: 45px;
          height: 20px;
          color: white;
          background: #97cbff;
          margin-right: 2px;
          line-height: 20px;
          text-align: center;
      }
    </style>

</head>
<body>
  <!-- 导航 --> 
  <div class="layout-header hidden-xs hidden-sm" id="scroll-wrap">
    <nav class="navbar navbar-default header ">
      <div class="container clearfix">
          <div class="layout-header-logo navbar-left">
              <a href="{% url 'index' %}" class="layout-header-logo-link" alt="魅族科技">
                <img src="{% static 'web/img/logo.png' %}">
              </a>
          </div>      
      </div>
    </nav>
  </div><!-- 导航 E--> 

  <!-- 主内容区域 -->
  <div id="content" class="content">  
    <div class="container-fluid"> 
		<div class="banner-box hidden-xs hidden-sm">
			<div class="container"> 
        <!--会员注册账号表单-->
				<form id="mainForm" name="mainForm" class="main-form" action="{% url 'doregister' %}" method="post" onsubmit="return check(this);">
					{% csrf_token %}
          <div class="tab-title" style="margin-bottom:5px;">
						<a class="linkABlue" id="toTelRegister" href="javascript:void(0)">注册账号</a>
					</div>
					
          <div id="warning-box" class="tip-box" style="{% if info %}margin-top:10px;margin-bottom:20px;display:block;{% else %}margin-top:10px;margin-bottom:20px;display:none;{% endif %}">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <i class="glyphicon glyphicon-exclamation-sign"></i>
              <span id="warning-span" class="tip-font">{{info}}</span>
              <span aria-hidden="true" class="cha">&times;</span>
            </button>
          </div>
          
					<div class="normalInput cycode-box fieldInput" id="cycode-box">
						<div class="cycode-selectbox">
							<input class="ipt-account inp-focus" name="username" id="account" maxlength="50" placeholder="登录账号" autocomplete="off"/>
						</div>
					</div>
					<div class="normalInput fieldInput passwd-box" style="margin-bottom:10px;">
						<input class="inp-focus" name="password" id="pass01" maxlength="16" placeholder="登录密码" autocomplete="off" type="password"/>
				  </div>
          <div id="tips" style="height:35px;padding:5px;margin:0 0 0 10px;">
            <label>强度</label><span></span><span></span><span></span><span></span><span></span>
          </div>
          <div class="normalInput fieldInput passwd-box">
            <input class="inp-focus" name="repassword" id="pass02" maxlength="16" placeholder="重复密码" autocomplete="off" type="password"/>
           </div>

					<div id="flymeService" class="rememberField" style="font-size:12px;">
						<label class="pointer" for="acceptFlyme" tabindex="0">点击立即注册，即表示您同意并愿意遵守</label>
						<a href="/serviceAgreement" target="_blank" class="linkABlue">商城服务协议</a>
						<label class="pointer">和</label>
						<a href="#" target="_blank" class="linkABlue">法律声明</a>
					</div>
					<a id="register" href="javascript:document.mainForm.submit();" onclick="return check(document.mainForm);" class="fullBtnBlue register-btn">立即注册</a>
					<div class="transferField">
						<a class="go2login linkABlue" href="{% url 'login' %}" id="toLogin">登录</a>
            <span>测试号:zhangsan 密码:123</span>
					</div>
				</form>
        <!--会员注册账号表单 E-->
			</div>
		</div>
      <!-- 移动端结构 -->
      <form id="mainAppForm" class="main-form app-main-form" >
    			<div class="tab-title">
    				<a class="linkABlue" id="toTelRegister" href="javascript:void(0)">注册账号</a>
    			</div>
    			<div class="tip-box visiblility-hidden">
    				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    					<i class="glyphicon glyphicon-exclamation-sign"></i>
    					<span class="tip-font"></span>
    					<span aria-hidden="true" class="cha">&times;</span>
    				</button>
    			</div>
    			<div class="normalInput cycode-box show-cycode" id="cycode-box">
    				<div class="cycode-selectbox">
    				  <input id="phone" name="phone" class="ipt-phone inp-focus" maxlength="11" placeholder="手机号码" autocomplete="off"/>
    				</div>
    			</div>
    			<div class="normalInput box-input">
    				<input class="pswInput inp-focus" name="kapkey" id="kapkey" maxlength="6" placeholder="密码" autocomplete="off" tabindex="3" type="text"/>
    			</div>
    			

          <div id="flymeService" class="rememberField" style="font-size:12px;">
            <label class="pointer" for="acceptFlyme" tabindex="0">点击立即注册，即表示您同意并愿意遵守</label>
            <a href="/serviceAgreement" target="_blank" class="linkABlue">Flyme服务协议</a>
            <label class="pointer">和</label>
            <a href="#" target="_blank" class="linkABlue">法律声明</a>
          </div>
          <a id="nextStep" href="javascript:document.mainForm.submit();" class="fullBtnBlue register-btn" data-step="1">立即注册</a>
          <div class="transferField">
            <a class="go2login linkABlue" href="{% url 'login' %}" id="toLogin">登录</a>
          </div>
      </form>
      <!-- 移动端结构 E-->

    </div>
  </div>
  <!-- 主内容区域  E-->

  <!-- 底部区域 -->
  <div id="flymeFooter " class="footerWrap hidden-xs hidden-sm">
    <div class="container">
      <div class="footer-layer1">
        <div class="footer-innerLink">
          <a href="#" target="_blank" title="关于魅族">关于魅族</a>
          <img class="foot-line" src="{% static 'web/img/space.gif' %}">
          <a href="#" target="_blank" title="工作机会">工作机会</a>
          <img class="foot-line" src="{% static 'web/img/space.gif' %}">
          <a href="#" target="_blank" title="联系我们">联系我们</a>
          <img class="foot-line" src="{% static 'web/img/space.gif' %}">
          <a href="#" target="_blank" title="法律声明">法律声明</a>
          <img class="foot-line" src="{% static 'web/img/space.gif' %}">

          <div href="javascript:void(0);" id="globalName" class="footer-language" title="简体中文">
            简体中文&nbsp;&nbsp;&nbsp;
            <div id="globalContainer" class="footer-language_menu">
              <a href="#" id="i18n-link" title="English" class="ClobalItem">English</a>
            </div>
          </div>
        </div>
        <div class="footer-service">
          <span class="service-label">客服热线</span>
          <span class="service-num">400-788-3333</span>
          <a id="service-online" class="service-online" href="javascript:void(0);" title="在线客服">在线客服</a>
        </div>
        <div class="footer-outerLink">
          <a class="footer-sinaMblog" href="#" target="_blank"><i class="i_icon"></i></a>

          <a id="footer-weChat" class="footer-weChat" href="javascript:void(0);" target="_blank"><i class="i_icon"></i></a>
          <a class="footer-qzone" href="#" target="_blank"><i class="i_icon"></i></a>
        </div>
      </div>
      <div class="clear"></div>
      <div id="flymeCopyright" class="copyrightWrap">
        <div class="copyrightInner">
          <span>&copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
          <a href="#" class="linkAGray" target="_blank">备案号: 粤ICP备13003602号-4</a>
          <a href="#" class="linkAGray" target="_blank">经营许可证编号: 粤B2-20130198</a>
          <a target="_blank" href="#" class="linkAGray">营业执照</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部区域 E -->

<script type="text/javascript">
    //检测密码值强度
    function checkStrong(val) {
        var modes = 0;
        if (val.length < 6) return 0;
        if (/\d/.test(val)) modes++;    //数字
        if (/[a-z]/.test(val)) modes++; //小写
        if (/[A-Z]/.test(val)) modes++; //大写  
        if (/\W/.test(val)) modes++;    //特殊字符
        if (val.length > 12) return 4;
        return modes;
    };

    //输入密码时检测密码强度
    $(function() {
        var aStr = ["弱爆", "弱", "中", "强", "牛逼"];

        $("#pass01").keyup(function() {
            var val = $(this).val();
            var num = checkStrong(val);
            switch (num) {
                case 0:
                    $("#tips span").css('background', 'yellow').text('').eq(num).css('background', 'red').text(aStr[num]);
                case 1:
                    $("#tips span").css('background', 'yellow').text('').eq(num).css('background', 'red').text(aStr[num]);
                    break;
                case 2:
                    $("#tips span").css('background', '#97cbff').text('').eq(num).css('background', 'green').text(aStr[num]);
                    break;
                case 3:
                    $("#tips span").css('background', '#97cbff').text('').eq(num).css('background', 'green').text(aStr[num]);
                    break;
                case 4:
                    $("#tips span").css('background', '#97cbff').text('').eq(num).css('background', 'green').text(aStr[num]);
                    break;
                default:
                    break;
            }
        })
    })

    //表单提交前进行数据校验
    function check(form){
        //校验密码长度
        var password = form.password.value;
        if (password.length < 6){
            //alert("密码长度小于6位！");
            $("#warning-span").text("密码长度小于6位！");
            $("#warning-box").show();
            form.password.focus();
            return false;
        }

        //校验密码强度
        if (checkStrong(password) <= 1){
            //alert("密码强度弱，请输入6位以上的字母、数字或符号！");
            $("#warning-span").text("密码强度弱，需6位以上字母和数字！");
            $("#warning-box").hide();
            $("#warning-box").show();
            form.password.focus();
            return false;
        }

        //校验重复密码是否一致
        var repassword = form.repassword.value;
        if (password != repassword){
            //alert("两次输入密码不一致！");
            $("#warning-span").text("两次输入密码不一致！");
            $("#warning-box").show();
            form.repassword.focus();
            return false;
        }

        return true;
    }
</script>

<script type="text/javascript">
  //nLogin();
</script>
</body>
</html>